React useFormStatus: Shakllar Holatini Boshqarish Bo'yicha To'liq Qo'llanma

React 18 da taqdim etilgan useFormStatus hook'i React Server Komponentlari ichidagi shakllarni yuborish holatini boshqarishning kuchli va samarali usulini taqdim etadi. Ushbu hook server harakatlari bilan ishlash uchun maxsus ishlab chiqilgan bo'lib, shakl yuborishlarini bevosita serverda qayta ishlash uchun uzluksiz integratsiyani taklif etadi. U shakl yuborish holatini kuzatish jarayonini soddalashtiradi va shakl kutilayotganligi, muvaffaqiyatli yakunlanganligi yoki xatolikka uchraganligi kabi qimmatli ma'lumotlarni taqdim etadi. Ushbu qo'llanmada useFormStatus ning imkoniyatlari, uning afzalliklari va turli stsenariylarda qo'llanilishini ko'rsatuvchi amaliy misollar o'rganiladi.

Server Actions va useFormStatus'ni Tushunish

useFormStatus ga sho'ng'ishdan oldin, React Server Komponentlari va Server Actions'ni tushunish juda muhim. Server Actions sizga serverda ishlaydigan, React komponentlaringizdan bevosita foydalanish mumkin bo'lgan funksiyalarni aniqlash imkonini beradi. Bu alohida API endpoint'iga ehtiyoj sezmasdan shakl yuborish, ma'lumotlarni olish va boshqa server tomonidagi operatsiyalarni bajarish imkonini beradi.

Keyin useFormStatus hook'i shakl yuborishlari natijasida ishga tushirilgan ushbu Server Actions'ning bajarilishi haqida ma'lumot beradi.

useFormStatus nima?

useFormStatus - bu eng so'nggi shakl yuborish holati haqidagi ma'lumotlarni o'z ichiga olgan obyektni qaytaradigan React hook'i. Bu ma'lumotlar quyidagilarni o'z ichiga oladi:

• pending: Shakl hozirda yuborilayotganligini ko'rsatuvchi mantiqiy (boolean) qiymat.
• data: Yuborish bilan bog'liq FormData obyekti.
• method: Yuborish uchun ishlatilgan HTTP usuli (odatda 'POST').
• action: Ishga tushirilgan Server Action funksiyasi.

useFormStatus'dan Foydalanishning Afzalliklari

useFormStatus'dan foydalanish bir nechta asosiy afzalliklarni taqdim etadi:

• Soddalashtirilgan Holat Boshqaruvi: Shakl yuborish holatini kuzatish uchun qo'lda holat boshqaruviga bo'lgan ehtiyojni yo'qotadi. Hook yuborish jarayoni davomida avtomatik ravishda yangilanadi.
• Yaxshilangan Foydalanuvchi Tajribasi: Foydalanuvchilarga real vaqtda fikr-mulohazalarni taqdim etadi, masalan, shakl qayta ishlanayotganda yuklanish indikatorlarini ko'rsatish yoki muvaffaqiyatsizlik yuz berganda xato xabarlarini ko'rsatish.
• Toza Kod: Shakl yuborish mantiqini komponent renderidan ajratish orqali yanada deklarativ va qo'llab-quvvatlanadigan kod bazasini yaratishga yordam beradi.
• Server Actions bilan Uzluksiz Integratsiya: Server Actions bilan mukammal ishlash uchun mo'ljallangan bo'lib, shakl yuborishlarini bevosita serverda osonlikcha qayta ishlash imkonini beradi.

useFormStatus'ning Amaliy Misollari

Keling, turli stsenariylarda useFormStatus'dan foydalanishni ko'rsatish uchun bir nechta amaliy misollarni ko'rib chiqaylik.

Yuklanish Indikatori Bilan Asosiy Shakl Yuborish

Ushbu misol shakl yuborilayotganda ko'rsatiladigan yuklanish indikatoriga ega oddiy shaklni namoyish etadi.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Yuklanish holatini namoyish qilish uchun kechikishni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  console.log('Shakl ism bilan yuborildi:', name);
  return { message: `Shakl ${name} ismi bilan muvaffaqiyatli yuborildi` };
}

React Komponenti (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'

function FormComponent() {
  const { pending } = useFormStatus()

  return (
    

      Ism:
      
      
        {pending ? 'Yuborilmoqda...' : 'Yuborish'}
      
    
  )
}

export default FormComponent

Ushbu misolda, useFormStatus'dan olingan pending xususiyati shakl yuborilayotganda kiritish maydoni va tugmani o'chirib qo'yish hamda "Yuborilmoqda..." xabarini ko'rsatish uchun ishlatiladi.

Muvaffaqiyat va Xatolik Holatlarini Boshqarish

Ushbu misol shakl yuborilgandan keyin muvaffaqiyat va xatolik holatlarini qanday boshqarishni ko'rsatadi.

Server Action (actions.js):

'use server'

export async function submitForm(formData) {
  // Kechikishni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');

  if (!name) {
    throw new Error('Ism kiritilishi shart');
  }

  console.log('Shakl ism bilan yuborildi:', name);
  return { message: `Shakl ${name} ismi bilan muvaffaqiyatli yuborildi` };
}

React Komponenti (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await submitForm(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Ism:
      
      
        {pending ? 'Yuborilmoqda...' : 'Yuborish'}
      
      {pending && 
Yuborilmoqda...
}
      {message && 
{message}
}
      {error && 
Xatolik: {error}
}
    
  )
}

export default FormComponent

Ushbu misolda, handleSubmit funksiyasida try/catch bloki ishlatiladi. Agar Server Action xatolik yuzaga keltirsa, u ushlanadi va foydalanuvchiga ko'rsatiladi. Muvaffaqiyatli yuborilganda muvaffaqiyat xabari ko'rsatiladi.

Murakkab Ma'lumotlar uchun FormData'dan Foydalanish

useFormStatus FormData bilan uzluksiz ishlaydi, bu sizga murakkab ma'lumotlar tuzilmalarini osonlik bilan boshqarish imkonini beradi. Mana fayllarni yuklashni ko'rsatuvchi misol.

Server Action (actions.js):

'use server'

export async function uploadFile(formData) {
  // Faylni qayta ishlashni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 2000));

  const file = formData.get('file');

  if (!file) {
    throw new Error('Hech qanday fayl yuklanmadi');
  }

  console.log('Fayl yuklandi:', file.name);
  return { message: `Fayl muvaffaqiyatli yuklandi: ${file.name}` };
}

React Komponenti (FormComponent.jsx):

'use client'

import { useFormStatus } from 'react-dom'
import { uploadFile } from './actions'
import { useState } from 'react'

function FormComponent() {
  const { pending } = useFormStatus()
  const [message, setMessage] = useState(null);
  const [error, setError] = useState(null);

  async function handleSubmit(formData) {
    try {
      const result = await uploadFile(formData);
      setMessage(result.message);
      setError(null);
    } catch (e) {
      setError(e.message);
      setMessage(null);
    }
  }

  return (
    

      Fayl Yuklash:
      
      
        {pending ? 'Yuklanmoqda...' : 'Yuklash'}
      
      {pending && 
Yuklanmoqda...
}
      {message && 
{message}
}
      {error && 
Xatolik: {error}
}
    
  )
}

export default FormComponent

Ushbu misol FormData yordamida fayl yuklashni qanday boshqarishni ko'rsatadi. Server actioni faylni FormData obyektidan oladi va uni qayta ishlaydi. useFormStatus hook'i fayl yuklanayotganda yuklanish holatini boshqaradi.

useFormStatus'dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

useFormStatus'ning afzalliklarini maksimal darajada oshirish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

• Aniq Foydalanuvchi Fikr-Mulohazalarini Taqdim Etish: Ma'lumot beruvchi yuklanish indikatorlarini ko'rsatish va bir nechta yuborishlarning oldini olish uchun shakl elementlarini o'chirib qo'yish uchun pending holatidan foydalaning.
• Xatoliklarni To'g'ri Boshqarish: Server Actions'dagi istisnolarni ushlash va foydalanuvchiga qulay xato xabarlarini ko'rsatish uchun xatoliklarni boshqarishni amalga oshiring.
• Ma'lumotlarni Serverda Tasdiqlash: Ma'lumotlar yaxlitligi va xavfsizligini ta'minlash uchun server tomonida tasdiqlashni amalga oshiring.
• Server Actions'ni Qisqa Tutish: Ishlash samaradorligini va qo'llab-quvvatlanishini yaxshilash uchun Server Actions'ni aniq vazifalarga yo'naltiring.
• Maxsus Imkoniyatlarni (Accessibility) Hisobga Olish: To'g'ri yorliqlar, ARIA atributlari va klaviatura navigatsiyasi yordamini ta'minlash orqali shakllaringiz maxsus imkoniyatlarga ega bo'lishini ta'minlang.

Kengaytirilgan Foydalanish Holatlari

Asosiy misollardan tashqari, useFormStatus yanada murakkab stsenariylarda ishlatilishi mumkin:

• Progressiv Yaxshilanish: JavaScript o'chirilgan foydalanuvchilar uchun asosiy tajribani va JavaScript yoqilganlar uchun boyroq tajribani taqdim etish orqali shakllaringizni progressiv ravishda yaxshilash uchun Server Actions va useFormStatus'dan foydalaning.
• Optimistik Yangilanishlar: Shakl yuborilganidan so'ng, yuborish muvaffaqiyatli bo'ladi deb taxmin qilib, UI'ni darhol yangilash orqali optimistik yangilanishlarni amalga oshiring. Agar yuborish muvaffaqiyatsiz bo'lsa, yangilanishni bekor qiling.
• Shakl Kutubxonalari Integratsiyasi: Shakl holati va tasdiqlashini boshqarish uchun useFormStatus'ni Formik yoki React Hook Form kabi mashhur shakl kutubxonalari bilan integratsiya qiling. Ushbu kutubxonalar ko'pincha o'zlarining holat boshqaruviga ega bo'lsalar ham, useFormStatus server actioniga yakuniy yuborish bosqichi uchun foydali bo'lishi mumkin.

Xalqarolashtirish (i18n) Uchun Mulohazalar

Global auditoriya uchun shakllar yaratayotganda, xalqarolashtirish (i18n) juda muhim. Mana useFormStatus'dan foydalanganda i18n'ni qanday hisobga olish kerak:

• Mahalliylashtirilgan Xato Xabarlari: Foydalanuvchiga ko'rsatiladigan xato xabarlarining ularning afzal ko'rgan tiliga mahalliylashtirilganligiga ishonch hosil qiling. Bunga xato xabarlarini tarjima fayllarida saqlash va mos tarjimani olish uchun react-intl yoki i18next kabi kutubxonadan foydalanish orqali erishish mumkin.
• Sana va Raqam Formatlash: Sana va raqam formatlashni foydalanuvchining joylashuviga qarab bajaring. Ushbu qiymatlarni to'g'ri formatlash uchun Intl.DateTimeFormat va Intl.NumberFormat kabi kutubxonalardan foydalaning.
• O'ngdan Chapga (RTL) Qo'llab-quvvatlash: Agar ilovangiz o'ngdan chapga yoziladigan tillarni (masalan, arab, ibroniy) qo'llab-quvvatlasa, shakllaringiz RTL tartiblariga mos ravishda to'g'ri uslublanganligiga ishonch hosil qiling.
• Shaklni Tasdiqlash: Shaklni tasdiqlash qoidalarini turli joylashuvlarga moslashtiring. Masalan, telefon raqamini tasdiqlash mamlakatlar bo'ylab sezilarli darajada farq qilishi mumkin.

Mahalliylashtirilgan Xato Xabarlari Misoli:

// tarjimalar/uz.json
{
  "form.error.nameRequired": "Iltimos, ismingizni kiriting.",
  "form.success.submission": "Yuborganingiz uchun rahmat!"
}

// tarjimalar/ru.json
{
  "form.error.nameRequired": "Пожалуйста, введите ваше имя.",
  "form.success.submission": "Спасибо за вашу отправку!"
}

// react-intl'dan foydalanuvchi komponent
import { useIntl } from 'react-intl';

function FormComponent() {
  const intl = useIntl();
  const [error, setError] = useState(null);

  // ...

  catch (e) {
    setError(intl.formatMessage({ id: 'form.error.nameRequired' }));
  }
}

Maxsus Imkoniyatlar (Accessibility) Bo'yicha Mulohazalar

Maxsus imkoniyatlar (Accessibility) inklyuziv veb-ilovalar yaratishning asosiy jihatidir. useFormStatus'dan foydalanganda yodda tutish kerak bo'lgan bir nechta maxsus imkoniyatlar bo'yicha mulohazalar:

• ARIA Atributlari: Yordamchi texnologiyalarga shakl holati haqida ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, shakl kutilayotganda yuborish tugmasida aria-busy="true" dan foydalaning.
• Yorliqlar: Barcha shakl maydonlarida <label> elementi yordamida kiritish elementlari bilan bog'langan aniq va tavsiflovchi yorliqlar mavjudligiga ishonch hosil qiling.
• Xato Xabarlari: Xato xabarlarini nogironligi bo'lgan foydalanuvchilar tomonidan osongina seziladigan va tushuniladigan tarzda ko'rsating. Ekran o'quvchilariga xato xabarlarini e'lon qilish uchun aria-live="assertive" kabi ARIA atributlaridan foydalaning.
• Klaviatura Navigatsiyasi: Foydalanuvchilar shaklni faqat klaviatura yordamida kezishi mumkinligiga ishonch hosil qiling. Elementlarning fokus olish tartibini boshqarish uchun tabindex atributidan foydalaning.
• Rang Kontrasti: Shaklda ishlatiladigan matn va fon ranglari ko'rish qobiliyati zaif bo'lgan foydalanuvchilar tomonidan osongina o'qilishi uchun yetarli kontrastga ega ekanligiga ishonch hosil qiling.

useFormStatus va An'anaviy Holat Boshqaruvi Taqqoslanishi

An'anaga ko'ra, React dasturchilari shakl yuborish holatini komponent holati (useState) yoki murakkabroq holat boshqaruv kutubxonalari (masalan, Redux, Zustand) yordamida boshqarishgan. Mana ushbu yondashuvlarning useFormStatus bilan taqqoslanishi:

Xususiyat	useFormStatus	useState	Tashqi Holat Boshqaruvi
Murakkablik	Past	O'rta	Yuqori
Server Actions bilan integratsiya	Uzluksiz	Qo'lda integratsiyani talab qiladi	Qo'lda integratsiyani talab qiladi
Shablon Kod	Minimal	O'rtacha	Sezilarli
Mos Keladigan Foydalanish Holatlari	Bevosita Server Actions'ga yuboriladigan shakllar	Cheklangan holatga ega oddiy shakllar	Komponentlararo umumiy holatga ega murakkab shakllar

useFormStatus sizning shakllaringiz bevosita React Server Actions bilan o'zaro aloqada bo'lganda juda samarali. U shablon kodni kamaytiradi va jarayonni soddalashtiradi. Biroq, bir nechta komponentlar o'rtasida umumiy holatga ega juda murakkab shakllar uchun to'liq huquqli holat boshqaruv kutubxonasi hali ham o'rinli bo'lishi mumkin.

Umumiy Muammolarni Bartaraf Etish

useFormStatus'dan foydalanganda duch kelishingiz mumkin bo'lgan ba'zi umumiy muammolar va ularni bartaraf etish usullari:

• useFormStatus yangilanmayapti:
  • useFormStatus'ni action prop'i Server Action'ga o'rnatilgan <form> elementi ichida ishlatayotganingizga ishonch hosil qiling.
  • Server Action to'g'ri aniqlanganligi va eksport qilinganligini tekshiring.
  • Server Action'da uning muvaffaqiyatli yakunlanishiga to'sqinlik qilishi mumkin bo'lgan har qanday xatoliklarni tekshiring.
• Xato xabarlari ko'rsatilmayapti:
  • Server Action'da xatoliklarni to'g'ri ushlayotganingizga va xato xabarini qaytarayotganingizga ishonch hosil qiling.
  • Komponentingizda xato xabarini error holati yordamida ko'rsatayotganingizni tekshiring.
• Yuklanish indikatori paydo bo'lmayapti:
  • Yuklanish indikatorini shartli ravishda ko'rsatish uchun useFormStatus'dan olingan pending holatidan foydalanayotganingizga ishonch hosil qiling.
  • Server Action haqiqatan ham bajarilishi uchun biroz vaqt talab qilayotganini tekshiring (masalan, kechikishni simulyatsiya qilish orqali).

Xulosa

useFormStatus Server Komponentlaridan foydalanadigan React ilovalarida shakl yuborish holatini boshqarishning toza va samarali usulini taqdim etadi. Ushbu hook'dan foydalanib, siz kodingizni soddalashtirishingiz, foydalanuvchi tajribasini yaxshilashingiz va Server Actions bilan uzluksiz integratsiya qilishingiz mumkin. Ushbu qo'llanma useFormStatus'ning asoslarini, amaliy misollarni va undan samarali foydalanish bo'yicha eng yaxshi amaliyotlarni qamrab oldi. useFormStatus'ni React loyihalaringizga kiritish orqali siz shakllarni qayta ishlashni optimallashtirishingiz va global auditoriya uchun yanada mustahkam va foydalanuvchiga qulay ilovalar yaratishingiz mumkin.